

//waiting for small change


$screen-sm: 768px;
$screen-md: 992px;
$screen-lg: 1200px;



.container{// add all per = 10
	width: 1024px;
	margin: 0 auto;
	&::before,&::after{
		content: '';
		display: table;
		line-height: 0;
	}
	&::after{
		clear: both;
	}
	@for $i from 0 to 12{
		.pc-span#{$i+1}{
			width: 8.3333333333% * ($i+1);
			float: left;
			&::before,&::after{
				content: '';
				display: table;
				line-height: 0;
			}
			&::after{
				clear: both;
			}
		}
	}
	@for $i from 0 to 12{
		.pc-span-offset#{$i+1}{
			margin-left: 8.3333333333% * ($i+1);
			float: left;
		}
	}
}
//@media screen and (max-width: $screen-md) { //pad
 // .container {
 //   width: 750px;
 //   @for $i from 0 to 12{
//		.pc-span#{$i+1}{
//			width: 8.3333333333% * ($i+1);
//			float: left;
//			&::before,&::after{
//				content: '';
//				display: table;
//				line-height: 0;
//			}
//			&::after{
//				clear: both;
//			}
//		}
//	}
//	@for $i from 0 to 12{
//		.pc-span-offset#{$i+1}{
//			margin-left: 8.3333333333% * ($i+1);
//			float: left;
//		}
//	}
//  }
//}

@for $i from 1 to 11{ //only for percent
	.span#{$i}{
		width: 10% * $i;
		float: left;
	}
}

//waiting for small change